<template>
  <div class="category-main">
    <v-container fluid>
      <v-row dense>
        <v-col
          v-for="item in this.$store.state.childCategories"
          :key="item.id"
          :cols="6"
        >
          <div
            @click="$router.push(`/goodsList?categoryId=${item.id}`)"
            class="d-flex flex-column justify-center align-center grid ma-2"
          >
            <div style="width: 70%">
              <v-img :src="item.icon || ''"></v-img>
            </div>
            <div class="mt-2">{{ item.name }}</div>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.category-main {
  background-color: #eeeeee;
  height: 100vh;
  .grid {
    background-color: white;
    padding: 15px;
    font-size: 13px;
    i {
      font-size: 45px;
    }
  }
}
</style>
